/**
* 告警设置
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>告警设置</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中"
      style="width: 100%;">
      <el-table-column align="center" type="index" width="60">
      </el-table-column>
      <el-table-column sortable prop="deviceId" label="规则名称" width="250" show-overflow-tooltip>
      </el-table-column>
      <el-table-column sortable prop="productKey" label="规则描述" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column sortable prop="deviceName" label="创建时间" width="150" show-overflow-tooltip>
      </el-table-column>
      <el-table-column sortable prop="state" label="运行状态" width="80" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="left" label="操作" min-width="150">
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
  </div>
</template>

<script>
  import {
    DeleteDevice,
    UnbindDevice,
    GatewayChildren,
  } from '../../api/deviceApi'
  import Pagination from '../../components/Pagination'
  export default {
    data() {
      return {
        loading: false, //是显示加载
        editFormVisible: false, //控制编辑页面显示与隐藏
        chidrenDevicesVisiable: false,
        title: '预览',
        formInline: {
          page: 1,
          limit: 10,
          pk: '',
          dn: '',
          online: ''
        },
        products: {},
        listData: [],
        gatewayChildren: [],
        productMap: {},
        // 分页参数
        pageparm: {
          currentPage: 1,
          pageSize: 10,
          total: 10
        }
      }
    },
    // 注册组件
    components: {
      Pagination
    },
    /**
     * 数据发生改变
     */

    /**
     * 创建完毕
     */
    created() {
      this.getdata(this.formInline)
    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
      getdata() {
        this.loading = true

      },
      // 分页插件事件
      callFather(parm) {
        this.formInline.page = parm.currentPage
        this.formInline.limit = parm.pageSize
        this.getdata(this.formInline)
      },
      // 搜索事件
      search() {
        this.getdata(this.formInline)
      },
      goDeviceDetail(index, row) {
        this.$router.push({
          path: '/device/DeviceDetail',
          query: {
            deviceId: row.deviceId
          }
        })
      },
      deleteDevice(index, row) {
        this.loading = true
        DeleteDevice(row.deviceId)
          .then(() => {
            this.search();
            this.loading = false
          }, () => {
            this.loading = false
          })
      },
      unbindDevice(index, row) {
        this.loading = true
        UnbindDevice(row.deviceId)
          .then(() => {
            this.search();
            this.loading = false
          }, () => {
            this.loading = false
          })
      },
      showChidrenDevices(index, row) {
        this.loading = true
        GatewayChildren(row.deviceId)
          .then(res => {
            this.loading = false
            this.chidrenDevicesVisiable = true;

            res.forEach(d => {
              d.productKey = this.productMap[d.productKey];
            });
            this.gatewayChildren = res;
          }, () => {
            this.loading = false
          })
      }
    }
  }
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }

  .userRole {
    width: 100%;
  }
</style>
